import { lazy, Suspense } from "react"
import { Navigate, useRoutes } from "react-router-dom"

const Home = lazy(() => import("../pages/Home"))
const About  = lazy(()=>import('../pages/Home/About'))
const Uilts  = lazy(()=>import('../pages/Home/Uilts'))

const comp = (Comp) => {
    return <Suspense backfall={<div>加载中</div>}>
        <Comp />
    </Suspense>
}

const root = [
    {
        path: '/home',
        element: comp(Home),
        children: [
            {
                path: '/home/about',
                element: comp(About),
            },
            {
                path: '/home/uilts',
                element: comp(Uilts),
            }
        ]
    },
    {
        path: '/',
        element: <Navigate to={'/home'} />
    },
    {
        path: '*',
        element: <Navigate to={'/home'} />
    },
]

export default root
export const GetRoute = () => {
    return useRoutes(root)
}